<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设备档案更新</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">设备编号</view>
				<input readonly  name="input" v-model="myFormData.deviceId"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">中燃设备编号</view>
				<input readonly  name="input" v-model="myFormData.deviceCode"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">设备类型</view>
				<input readonly v-if="myFormData.equipmentType=='0'" name="input" value="锂电设备"></input>
				<input readonly v-if="myFormData.equipmentType=='1'" name="input" value="阀门井"></input>
				<input readonly v-if="myFormData.equipmentType=='2'" name="input" value="市电设备"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">供电情况</view>
				<input readonly v-if="myFormData.powersupply=='0'" name="input" value="锂电"></input>
				<input readonly v-if="myFormData.powersupply=='1'" name="input" value="市电"></input>
				<input readonly v-if="myFormData.powersupply=='2'" name="input" value="太阳能"></input>
			</view>
			<view v-if="myFormData.equipmentType=='0'" class="cu-form-group">
				<view class="title">cat-1锂电类型</view>
				<input readonly v-if="myFormData.catType=='0'" name="input" value="压力"></input>
				<input readonly v-if="myFormData.catType=='1'" name="input" value="流量计"></input>
				<input readonly v-if="myFormData.catType=='2'" name="input" value="压力和流量计"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">在线状态</view>
				<input readonly v-if="myFormData.onlineState=='0'" name="input" value="离线"></input>
				<input readonly v-if="myFormData.onlineState=='1'" name="input" value="在线"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">设备状态</view>
				<input readonly v-if="myFormData.malfunctionState=='0'" name="input" value="正常"></input>
				<input readonly v-if="myFormData.malfunctionState=='1'" name="input" value="故障"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所属项目</view>
				<input readonly  name="input" v-model="myFormData.projectName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">经度</view>
				<input placeholder="请输入标题" name="input" v-model="myFormData.longitude"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">纬度</view>
				<input placeholder="请输入标题" name="input" v-model="myFormData.latitude"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">地理位置</view>
				<textarea placeholder="请输入位置" name="input" v-model="myFormData.address"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">描述</view>
				<textarea  placeholder="" name="input"  v-model="myFormData.describe" disabled></textarea>
			</view>

			<view class="cu-form-group">
			    <view class="title" >状态更改</view>
				<app-select  placeholder="请选择" :dict="bx_type" v-model="myFormData.status" @change="pickerChange"></app-select>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'


	export default {
		components:{
			appSelect
		 },
		data() {
			return {
				tempFileList:[],
				index: -1,
				switchC: true,
				imgList: [],
				videoList: [],
				plan_type: [] ,
				type:"1",
				selected:[],
				src:"",//视频存放
				uploadUrl:"/api/v1/appbusiness/two/upload",
				uploadUrlVideo:"/api/v1/appbusiness/two/uploadVideo",
				cameraList: [{
				                        value: 'back',
				                        name: '后置摄像头',
				                        checked: 'true'
				                    },
				                    {
				                        value: 'front',
				                        name: '前置摄像头'
				                    },
				                ],
				cameraIndex: 0,
				showVideo:false,
				myFormData:{
					id:'',
					deviceId:'',//系统设备编号
					deviceCode:'',//中燃设备编号
					equipmentType:'',//设备类型 0：锂电设备 1：阀门井 2:485 市电设备
					projectId:'',//项目id
					projectName:'',//项目名称
					onlineState:'',//在线状态0：离线 1：在线
					malfunctionState:'',//设备状态 0正常 1故障
					newState:'',//新旧状态 0：新设备 1：旧设备
					createtime:'',//创建时间
					describe:'',//描述
					address:'',//地理位置
					longitude:'',//经度
					latitude:'',//纬度
					powersupply:'',//供电情况 0：锂电 1：市电 2：太阳能
					sitetype:'',//站点类型
					catType:'',//cat-1锂电类型：  0：压力 1：流量计 2：压力和流量计
					status:'',
				},
				projectId:'',
				projectDescription:'',
				personLiable:'',
				projectType:'',
				deviceNumber:'',
				bx_type: [
					{value:'1',text:"生产发货",},
					{value:'2',text:"未安装"},
					{value:'3',text:"已安装"},
					{value:'4',text:"故障维修"},
					{value:'5',text:"拆回"},
				] ,
				testType:'',
			};
		},
		onLoad: function (option) {
			var that=this;
			uni.getLocation({
				type: 'GCJ02',
			    success: function (res) {
			        console.log('经度：' + res.longitude);
			        console.log('纬度：' + res.latitude);
					that.myFormData.longitude = res.longitude;
					that.myFormData.latitude = res.latitude;
					var point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(
						point,
						{},
						function(event) {
							var address = event.address; // 转换后的地理位置
							var point = event.coord; // 转换后的坐标信息
							var coordType = event.coordType; // 转换后的坐标系类型
							that.myFormData.address=address;
							console.log("——~——~——~——~——~签到位置信息",that.myFormData.address);
							
						},
						function(e) {}
					);
			    }
			});
			
			const annItem = JSON.parse(decodeURIComponent(option.item));
			this.myFormData = annItem 
			console.log('经度：' + this.myFormData.status);
			//更改提示语
			// this.myFormData.status='1';//暂定 无字段
			for (var i = 0; i < this.bx_type.length; i++) {
				if(this.bx_type[i].value === this.myFormData.status.toString()){
					this.testType=`确定要把设备状态更改为\n${this.bx_type[i].text}吗？`;
				}
			}
			
			this.myFormData.time = this.getTime();


		},
		computed: {
		
		},
		methods: {
			pickerChange(e){
				
				this.myFormData.status=e;
				
				for (var i = 0; i < this.bx_type.length; i++) {
					if(this.bx_type[i].value === e){
						// this.bx_type[i].text
						this.testType=`确定要把设备状态更改为\n${this.bx_type[i].text}吗？`;
					}
				}
			},

			//减
			reduce(){
				if(this.myFormData.installedNumber !== 0){
				this.myFormData.installedNumber--;
				}

			},
			//加
			adds(){
				this.myFormData.installedNumber++;
			},
			//数值检测
			countVal(e){
				this.myFormData.installedNumber = e.detail.value;
				if(this.myFormData.installedNumber == 0){
					this.myFormData.installedNumber == 1
				}
			},
			
			openLog(){
				uni.navigateTo({
					url: '/pages/common/emergencyLog?item='+ encodeURIComponent(JSON.stringify(this.projectId))
				});
			},

			getTime:function(){
						var date = new Date(),
						year = date.getFullYear(),
						month = date.getMonth() + 1,
						day = date.getDate(),
						hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
						second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						month >= 1 && month <= 9 ? (month = "0" + month) : "";
						day >= 0 && day <= 9 ? (day = "0" + day) : "";
						var timer = hour + ':' + minute + ':' + second;
						return timer;
					},

			onSubmit() {
				console.log('myform',this.myFormData)
		
				uni.showModal({
					title: '你好',
					content: this.testType,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$tip.loading();
							this.$http.put('/api/v1/appbusiness/two/equipmentUpdate',this.myFormData).then(res=>{
								console.log(res)
								this.$tip.loaded();
								if (res.data.success){
									this.$tip.toast('提交成功')
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 上一页
									uni.navigateBack({
									    success: function() {
									        beforePage.onLoad(); // 执行上一页的onLoad方法
									    }
									});
								}
							}).catch(()=>{
								this.$tip.loaded();
								this.$tip.error('提交失败')
							});
							
						}
					}
				})
			},
			
			
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {

					this.imgList = res.tempFilePaths  //这个是储存到当前页面显示的
					let tempFiles=res.tempFiles;
					tempFiles.forEach(function(item,index){
						console.log("-------------",item.name);
						console.log("-------------",item.path);
						that.tempFileList.push({
							name:item.name,
							path:item.path,
						})
					})

					let myimg = res.tempFilePaths;  //把数据直接插入到服务器  然后返回服务器的存储路径，然后插入到数据库
					for(let i = 0;i < myimg.length; i++) {
						console.info("------------myimg--",+myimg[i])
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: myimg[i],
								name: 'file'
							})
							.then(res => {
								/* that.myFormData.avatar=res.data.message; */
								console.log(res.data.message)
								let v = that.myFormData.reportPic;
								if(v==''){
									that.myFormData.reportPic=res.data.message;
								}else{
									that.myFormData.reportPic=v+','+res.data.message;
								}

							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						}

					}
				});
			},
			chooseVideo(){
				var that=this;
			    // 上传视频
			    uni.chooseVideo({
			        maxDuration:60,
			        count: 1,
			        camera: this.cameraList[this.cameraIndex].value,
			    	sizeType: ['original'],
			        sourceType: ['album','camera'],
			        success: (res) => {
			            let videoFile = res.tempFilePath;
			    		that.src = res.tempFilePath;
			    		that.$http.upload(that.$config.apiUrl+that.uploadUrlVideo, {
			    			filePath: videoFile,
			    			name: 'file'
			    		})
			    		.then(res => {
			    			that.showVideo=true;
			    			/* this.src = res.data.message; */
			    			that.myFormData.reportVideo=res.data.message;
			    		})
			    		.catch(err => {
			    			that.$tip.error(err.data.message)
			    		});
			    	}
			    })
			},
			ViewImage(path,index) {
				uni.previewImage({
					urls:this.imgList,
					current: index
				});
			},
			DelImg(index) {
				uni.showModal({
					title: '你好',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log("myFormData[删除图片]下标----",index)
							this.tempFileList.splice(index,1)
							console.log(this.tempFileList)

							var picString = this.myFormData.reportPic;
							var m = picString.split(",");
							for(let l = 0;l < m.length; l++){
								console.log("myFormDatareportPic返回给后端数据删除前  "+m[l]);
							}
							m.splice(index,1);
							var reporePic=null;
							for(let i = 0;i < m.length; i++){
								if(reporePic==null){
									reporePic=m[i];
								}else{
									reporePic=reporePic+','+m[i];
								}
								console.log("myFormDatareportPic返回给后端数据删除后  "+m[i]);
							}
							this.myFormData.reportPic=reporePic

							console.log("拼接完成返回给后端数据  "+this.myFormData.reportPic);
						}
					}
				})
			}

		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.burst-wrap{
	    width: 100%;
	    height: 100%;
	}
	.burst-wrap .burst-wrap-bg>view{
	    width: 90%;
	    height: 100%;
	    margin: 0 auto;
	    position: absolute;
	    top: 65upx;
	    left: 0;
	    right: 0;
	}

	.form-item{
	    width: 100%;
	}
	.form-item textarea{
	    display: block;
	    height: 220upx;
	    width: 100%;
	    color: #AAAAAA;
	    font-size: 28upx;
	}
	.uni-uploader__file,.uploader_video{
	    position: relative;
	    z-index: 1;
	    width: 200upx;
	    height: 200upx;
	}
	.uni-uploader__img {
	    width: 200upx;
	    height: 200upx;
	}
	.icon-cuo {
	    position: absolute;
	    right: 0;
	    top: 5upx;
	    background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
	    color: #FFFFFF;
	    z-index: 999;
	    border-top-right-radius: 20upx;
	    border-bottom-left-radius: 20upx;
	}
	.video{
	    width: 100%;
	    height: 100%;
	}

	.login-input-box{
	    position: relative;
	    border-bottom: 1upx solid #EEEEEE;
	}
	.login-input-box .forget,.login-input-box .phone{
	    position: absolute;
	    top: 0;
	    height: 100%;
	    z-index: 100;
	}
	.login-input-box .phone{
	    width: 100upx;
	    left: 0;
	    color: #666666;
	    font-weight: bold;
	}
	.login-input-box .phone-input{
	    padding-left: 100upx;
	}
	.address-wrap,.open-info{
	    margin-top: 20upx;
	}
	.open-info>view:last-child{
	    font-size: 28upx;
	    color: #999999;
	}
	.address-wrap .address {
	    background: #F2F2F2;
	    border-radius: 40upx;
	    padding: 0 20upx;
	}
	.user-set-btn{
	    margin: 40upx;
	    background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
	    color: #FFFFFF;
	    text-align: center;
	    height: 88upx;
	    line-height: 88upx;
	}

</style>
